<template>
	<div>
		<div class="time-line">
			当前已设置抢购时间点：
			<div class="time-line-i" v-for="(item, index) in checkboxGroup" :key="index">
				{{ item }}
			</div>
		</div>
		<div class="select-box">
			<el-checkbox-group @change="change" v-model="checkboxGroup" size="small">
				<el-checkbox
					v-for="(item, index) in checkBoxList"
					:key="index"
					:label="item"
					border
				></el-checkbox>
			</el-checkbox-group>
		</div>
	</div>
</template>
<script>
export default {
	name: 'setTime',
	data() {
		return {
			checkBoxList: [],
			checkboxGroup: []
		};
	},
	watch: {
		checkboxGroup(val) {
			// console.log(val);
			this.$emit('input', val);
		}
	},
	props: {
		value: {
			type: [Object, Array]
		}
	},
	created() {
		this.getFlashTime();
		for (let i = 0; i < 25; i++) {
			if (i > 9) {
				this.checkBoxList.push(i + ':00');
				continue;
			} else {
				this.checkBoxList.push('0' + i + ':00');
			}
		}
	},

	methods: {
		change(item) {
			item = item.sort();
			this.checkboxGroup = item;
		},
		getFlashTime() {
			this.$service.goodsMenagement.goods.flashTime().then(res => {
				// console.log(res);
				res.forEach(e => {
					// this.checkBoxList.push(e.time)
					this.checkboxGroup.push(e.time);
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.time-line {
	@include flexBox(null, center, wrap);
	flex-wrap: wrap;
	.time-line-i {
		width: 84px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		background: rgba(241, 77, 39, 1);
		border-radius: 21px;
		font-size: 16px;
		color: #fff;
		margin-left: 12px;
		margin-top: 10px;
	}
}
.select-box {
	margin-top: 41px;
	padding-left: 10px;
}

::v-deep .el-checkbox {
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
}
::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
	margin-left: 0px;
}
::v-deep .el-checkbox-group {
	@include flexBox(space-between, center);
	flex-wrap: wrap;
	// width: 800px;
}
</style>
